<template>
	<view class="page">
		<accountHeader title="车辆状态" switchTo="/pages/home/home"></accountHeader>
		<view class="page-top flex">
			<view class="top-box" >
				  <p>剩余电量 {{carStatus.surplus}} %</p>
				  <p>WLTC续航 ｜ {{carStatus.wltc}}</p>
			</view>
			<view class="top-box">
				<p>本次平均能耗 {{carStatus.averageEnergyConsumption}}L / 100km</p>
				<p>总计里程  {{carStatus.totalMileageState}}km</p>
			</view>
		</view>
		<view class="page-main">
			<view class="list">
				<view class="item-info">
					<view>
						<h4>蓄电池</h4>
						<span v-if="!carStatus.accumulatorState">正常</span>
						<span v-if="carStatus.accumulatorState">报警</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>车锁</h4>
						<span class="active" v-if="!carStatus.safetyLockState">已解锁</span>
						<span v-if="carStatus.safetyLockState">锁住</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>空调</h4>
						<span v-if="!carStatus.airConditionerState">正常</span>
						<span v-if="carStatus.airConditionerState">报警</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>动力系统</h4>
						<span v-if="!carStatus.dynamicalSystemState">正常</span>
						<span v-if="carStatus.dynamicalSystemState">报警</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>发动机</h4>
						<span v-if="!carStatus.engineCondition">正常</span>
						<span v-if="carStatus.engineCondition">报警</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>手刹</h4>
						<span v-if="!carStatus.parkingBrakeState">正常</span>
						<span v-if="carStatus.parkingBrakeState">报警</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>胎压</h4>
						<span v-if="!carStatus.tirePressureState">正常</span>
						<span v-if="carStatus.tirePressureState">报警</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
			<view class="list">
				<view class="item-info">
					<view>
						<h4>后备箱</h4>
						<span v-if="!carStatus.trunkCondition">开启</span>
						<span v-if="carStatus.trunkCondition">关闭</span>
					</view>
				</view>
				<u-icon name="arrow-right" size="40"></u-icon>
			</view>
		</view>

		<u-toast ref="uToasts"></u-toast>
	</view>
</template>

<script>
	import accountHeader from "@/components/acountHeader.vue"
	import {carDetailId} from "../../config/api/car.js"
	import store from '@/store/index.js';
	export default{
		components:{
			accountHeader
		},
		data() {
			return{
				id:this.$store.state.$activeCar.id,
				carStatus:""
			}
		},
		created(){
			if(this.id != undefined){
				carDetailId(this.id).then(res=>{
					this.carStatus = res
				})
			}else{
				uni.$u.toast('请选择默认车辆')
				setTimeout(function(){
					uni.switchTab({
						url:"/pages/home/home"
					})
				},3000)
			}
		
		}
	}
</script>

<style>
	/* 页面 */
	.page{
		padding:3%;
	}

	/* 页面头部 */
	.page-top{
		justify-content: space-between;
		margin-top: 40px;
	}

	/* 头部盒子 */
	.top-box{
		margin-top: 40rpx;
		width: 45%;
		background-color: ghostwhite;
		font-size: 12px;
		padding: 7px;
	}
	.top-box>p{
		margin-top: 5px;
	}

	/* 状态列表 */
	.list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20px;
		border-bottom: 1px solid gainsboro;
		padding-bottom: 10px;
	}

	.list .item-info{
		display: flex;
	}

	.list .item-img{
		margin: 10px;
		margin-top: 0;
	}

	/* 已解锁状态 */
	.active{
		color: red;
	}
</style>
